<template>
	<view class="request-loading-view">
	    <view class="loading-view">
			<view class="loading"></view>
			<text class="loading-text">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PocketLoading',
		props: {
			direction: {
				type: String,
				default: 'vertical'
			},
			title: {
				type: String,
				default: '加载中...'
			},
			
		},
		data() {
			return {
				steps: []
			}
		}
	}
</script>

<style lang="scss">
	.request-loading-view {
		  display: flex;
		  justify-content: center;
		  align-items: center;
	}
	.loading-view {
	  width: 160upx;
	  height: 160upx;

	  border-radius: 20upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.loading-text {
		margin-top: 10upx;
		color: #333;
	}
	/* 动画样式 */
	.loading {
	  border: 10upx solid rgba(255, 255, 255, 0.01);
	  border-radius: 50%;
	  border-top: 10upx solid #333;
	  border-right: 10upx solid #333;
	  border-bottom: 10upx solid #333;
	  width: 60upx;
	  height: 60upx;
	  -webkit-animation: spin 1.4s linear infinite;
	  animation: spin 1.4s linear infinite;
	}
	
	@-webkit-keyframes spin {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	
	  100% {
	    -webkit-transform: rotate(360deg);
	  }
	}
	
	@keyframes spin {
	  0% {
	    transform: rotate(0deg);
	  }
	
	  100% {
	    transform: rotate(360deg);
	  }
	}
</style>
